<template>
  <div>
    <!-- banner -->
    <div class="banner_about">
      <div>我们的平台</div>
    </div>
    <!-- 侧边导航 -->
    <div class="j_sideNav" style="height: 70px;" id="j_sideNav_our">
      <ul id="j_box">
        <li @click="jump (1)">
          <a href="javascript:;" :class="{'active':ind == 1}">
            <i :class="{'j_active':jind == 1}"></i>
            桌面版MT4
          </a>
        </li>
        <li @click="jump (2)">
          <a href="javascript:;" :class="{'active':ind == 2}">
            <i :class="{'j_active':jind == 2}"></i>
            移动版MT4
          </a>
        </li>
      </ul>
    </div>
    <div class="our">
      <!-- 我们的平台 -->
      <div class="ourplatform d_jump_our">
        <div class="ourplatform_content">
          <h1>桌面版 META TRADER 4</h1>
          <div class="title_img">
            <img src="./images/mt4.png" alt="">
          </div>
          <p>Meta Trader 4是在北美乃至全球范围内最受推崇并且最常使用的交易平台之一。</p>
          <p>UKDFX MT4平台以实用的功能向用户提供优质高效的交易体验，使您的交易更加简便。</p>
          <p>我们MT4平台可以完全实现个性化定制以符合您的交易形式与需求，提供了极速的一键执行功能，具有深度的市场技术分析，并且可以使用EA机器人交易程序做自动化交易。</p>
          <p>我们亦可直接在您的 MT4 平台上串流交易设定，协助您做出慎密并且及时的交易决策，如此一来能够更进 一步强化您的交易经验。</p>
          <p>UKDFX 的 MT4 平台向您完全免费开放并且您将其下载后可以随时随地使用。马上就来畅享 UKDFX 给您 带来的不同体验吧.</p>
          <div class="download">
            <div>
              <img src="./images/mt4.jpg" alt="">
            </div>
            <div class="pt_download">
              <a href="/static/mt4/ukdevelopment4setup.exe" download=""><img src="./images/pt_download.png" alt=""></a>
            </div>
            <p style="margin-left: 18%;">个人电脑安装MetaTrader4系统要求：Windows 7及以上系统。</p>
          </div>
        </div>
      </div>
      <!-- 我们的平台2 -->
      <div class="ourplatform_two d_jump_our">
        <div class="ourplatform_two_content">
          <h1>移动版 META TRADER 4</h1>
          <p>MT4的行动交易</p>
          <p>在你的智慧手机或平板上走到哪里都可以交易</p>
          <p>UKDFX 提供MetaTrader4手机版平台，支持iPhone、iPad、Android</p>
          <p>通过MT4手机交易平台，您可以随时随地，轻轻松松在移动设备上享受台式电脑MT4的卓越功能。</p>
          <p>1. 可以在任何时候，任何地点，通过移动设备查看报价，更加及时地把握市场走势</p>
          <p>2. 拥有和桌面版MT4相同的安全、稳定性能</p>
          <p>3. 手机平台集合了桌面版平台最实用的功能，令操作更加简便灵活</p>
          <p>4. 可以随时拿出手机管理交易账户，查看账户交易余额和收益情况</p>
          <p>5. 可以利用MT4自带的不同交易分析工具进行走势分析</p>
          <p>6. 下载安装更快捷</p>
          <div class="ourplatform_imgs">
            <img src="./images/MetaTrader5.jpg" alt="">
          </div>
          <p style="margin-top: 30px;">无论你是使用Android或是iOS装置，有了UKDFX MetaTrader 4，无论走到哪边随时随地都可以交易！只要从Apple APP Store或是Google Play下载MT4应用程式，就可以开始了！</p>
          <div class="ourplatform_imgs">
            <img src="./images/mt4.png" alt="" width="248">
          </div>
          <div class="mobliedown">
            <div>
              <!--<h3>ios</h3>-->
              <p>a.选择/点击下面的APP Store,点击下载MT4   app。</p>
              <p>b.于MT4 app中直接选取 UKD 服务器。</p>
              <p class="phone_btn">
                <img src="./images/ios-button.png" alt="">
              </p>
            </div>
            <div>
              <p class="phone_OR">
                <img src="./images/ios-d.png" alt="">
              </p>
            </div>
          </div>
          <div class="mobliedown" style="margin-top: 57px;">
            <div>
              <!--<h3>Android</h3>-->
              <p>a.选择/点击下面的Google Play,点击下载MT4   app。</p>
              <p>b.于MT4 app中直接选取 UKD 服务器。</p>
              <p class="phone_btn">
                <img src="./images/android-button.png" alt="">
              </p>
            </div>
            <div>
              <p class="phone_OR">
                <img src="./images/android-d.png" alt="">
              </p>
            </div>
          </div>
        </div>
    </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  export default{
    data() {
      return {
        ind: 1,
        jind: 1,
        indd: 1,
        contOffsetDown: [],
        contOffsetUp: []
      }
    },
    mounted: function () {  //mounted函数，表示挂载到实例上去之后调用该钩子
//      this.$nextTick(function () {
        window.addEventListener('scroll', this.onScroll)
//      });
      this.jump(this.indd);
      this.getContOffset();
    },
    created: function () {  //
      this.indd = this.$route.query.ind;
    },
    methods: {
      getContOffset(){ // 楼层滚动
        let cont = document.querySelectorAll('.d_jump_our');
        for (var i = 0; i < cont.length; i++) {
          this.contOffsetDown.push(cont[i].offsetTop - (window.screen.height) / 2);
          this.contOffsetUp.push(cont[i].offsetTop + cont[i].offsetHeight - 200);
        }
      },
      onScroll () {
        let scrolled = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
        let querySelecto = document.querySelector('#j_sideNav_our');
        let side = querySelecto;
        for (var i = 0; i < this.contOffsetDown.length; i++) {
          // 滚的距离大于第一个小于第二个
          if (scrolled >= this.contOffsetDown[i] && scrolled < this.contOffsetDown[i+1]) {
            //console.log(this.contOffsetDown[i]+'---'+scrolled)
            this.jind = i+1;
            this.ind = i+1;
          }else if(scrolled >= this.contOffsetDown[this.contOffsetDown.length-1]){
            this.jind = this.contOffsetDown.length;
            this.ind = this.contOffsetDown.length;
          }
        }
        this.scrolled = scrolled;
        if (scrolled >= 2800) {
          side.style.bottom = '0px';
          side.style.top = "10%";
        } else if (scrolled <= 300) {
          side.style.top = '50%';
        } else if (scrolled <= 800 && scrolled >= 300) {
          side.style.top = '20%';
        } else if (scrolled <= 2500 && scrolled >= 800) {
          side.style.bottom = '15%';
        } else {
          side.style.top = '10%';
        }
      },
      jump (index) {
        if (typeof(index) == "undefined") {
          var index2 = 1;
          this.ind = index2;
          this.jind = index2;
          return false;
        } else {
          var index2 = index;
          this.ind = index2;
          this.jind = index2;
        }
        // 用 class="d_jump" 添加锚点
        let jump_about = document.querySelectorAll('.d_jump_our');
        let total = jump_about[index-1].offsetTop;
        let distance = document.documentElement.scrollTop || document.body.scrollTop;
        // 平滑滚动，时长500ms，每10ms一跳，共50跳
        let step = total / 50;
        if (total > distance) {
          smoothDown();
        } else {
          let newTotal = distance - total;
          step = newTotal / 50;
          smoothUp();
        }
        function smoothDown() {  //向下滚动
          if (distance < total) {
            distance += step;
            document.body.scrollTop = distance;
            document.documentElement.scrollTop = distance;
            setTimeout(smoothDown, 10);
          } else {
            document.body.scrollTop = total;
            document.documentElement.scrollTop = total;
          }
        }

        function smoothUp() {  //向上滚动
          if (distance > total) {
            distance -= step;
            document.body.scrollTop = distance;
            document.documentElement.scrollTop = distance;
            setTimeout(smoothUp, 10);
          } else {
            document.body.scrollTop = total;
            document.documentElement.scrollTop = total;
          }
        }
      }
    }
  }
</script>

<style scoped>
  .j_sideNav {
    width: 220px;
    height: 297px;
    position: fixed;
    bottom: 10%;
    right: 17%;
    background: url("./images/xuxian.png") no-repeat  27px 19px;
  }

  /*  @media (min-width: 1024px) {
      .j_sideNav {
        right: 2%;
      }
    }*/

  @media (min-width: 1100px) {
    .j_sideNav {
      right:0%;
    }
  }

  @media (min-width: 1366px) {
    .j_sideNav {
      right: 2%;
    }
  }

  @media (min-width: 1440px) {
    .j_sideNav {
      right: 7%;
    }
  }

  @media (min-width: 1680px) {
    .j_sideNav {
      right: 14%;
    }
  }

  .j_sideNav ul li {
    margin-left: 20px;
    height: 54px;
  }

  .j_sideNav ul li a i {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url('./images/mpie.png') no-repeat;
    margin-right: 25px;
  }

  .j_sideNav ul li a i.j_active {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url('./images/pie.png') no-repeat;
  }

  .j_sideNav ul li a {
    font-size: 20px;
    color: #636363;
    display: block;
    /*font-weight:bold;*/
  }

  .j_sideNav ul li a.active {
    color: #ff9c00;
  }
  .j_sideNav ul li a:hover,.j_sideNav ul li a:link{
    text-decoration: none;
  }
  .banner_about{
    height: 411px;
    width: 100%;
    background: url("../../../static/images/banner_min.jpg") no-repeat;
    overflow: hidden;
  }
  .banner_about div{
    padding-top:228px;
    width:1085px;
    margin:0 auto;
    font-size: 48px;
    color: #fff;
    box-sizing: border-box;
  }
  .ourplatform{
    padding-bottom: 60px;
  }
  .our{
    width: 1200px;
    margin: 0 auto;
  }
  .ourplatform_content{
    width: 900px;
    padding-top: 50px;
  }
  .ourplatform_content h1{
    font-size: 32px;
    color: #ffa311;
    font-weight: bold;
    letter-spacing: 5px;
  }
  .ourplatform_content .title_img{
    width: 240px;
    height: 56px;
    margin:30px 0;
  }
  .ourplatform_content .title_img img{
    width: 100%;
    height: 100%;
  }
  .ourplatform_content p{
    font-size: 18px;
    color: #333;
    margin-bottom:25px;
    line-height: 25px;
    width: 848px;
  }
  .ourplatform_content .download{
    margin-top: 14px;
    width: 85%;
    height: 444px;
  }
  .ourplatform_content .download div img {
    width: 100%;
    height: 100%;
  }
  .ourplatform_content .download .pt_download {
    width: 372px;
    height: 68px;
    margin: 50px auto 24px;
    cursor: pointer;
  }
  .ourplatform_content .download .pt_download img {
    width: 100%;
    height: 100%;
  }
  .ourplatform_two{
    height: 1500px;
    margin-top: 20px;
  }
  .ourplatform_two .ourplatform_two_content{
    width: 900px;
    padding-top: 50px;
  }
  .ourplatform_two .ourplatform_two_content h1{
    font-size: 32px;
    color: #ffa311;
    font-weight: bold;
    letter-spacing: 5px;
  }
  .ourplatform_two .ourplatform_two_content p{
    /*margin-top: 30px;*/
    font-size: 17px;
    color: #333333;
    /*line-height: 30px;*/
    width: 855px;
  }
  .ourplatform_two .ourplatform_two_content p:nth-child(2){
    margin-top:40px;
  }
  .ourplatform_two .ourplatform_two_content .ourplatform_imgs{
    margin-top: 30px;
  }
  .ourplatform_two .ourplatform_two_content .mobliedown{
    margin-top: 15px;
    height: 210px;
  }
  .ourplatform_two .ourplatform_two_content .mobliedown div{
    height: 233px;
    float: left;
  }
  .ourplatform_two .ourplatform_two_content .mobliedown div:nth-child(2){
    margin-left: 70px;
  }
  .ourplatform_two .ourplatform_two_content .mobliedown h3{
    font-size: 20px;
    color: #333333;
    margin-bottom: 20px;
  }
  .ourplatform_two .ourplatform_two_content .mobliedown p{
    font-size: 17px;
    width: 405px;
    margin-top: 0px;
  }
  .ourplatform_two .ourplatform_two_content .mobliedown span{
    display: block;
    margin-top: 50px;
  }

  /*行动版下载二维码*/
  .ourplatform_two .ourplatform_two_content .mobliedown p.phone_OR {
    display: inline-block;
    width: 202px;
    height: 202px;
    margin-left: 20%;
  }
  .ourplatform_two .ourplatform_two_content .mobliedown .phone_OR img {
    width: 100%;
    height: 100%;
  }
  .ourplatform_two .ourplatform_two_content .mobliedown .phone_btn {
    width: 392px;
    height: 74px;
    cursor: pointer;
    margin-top: 65px;
  }
  .ourplatform_two .ourplatform_two_content .mobliedown .phone_btn img {
    width: 100%;
    height: 100%;
  }
</style>
